import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu } from 'antd';
import React,{useEffect,useState} from 'react';
import {useNavigate,useLocation} from 'react-router-dom';

const Aside = () => {
    const navigate=useNavigate()
    const location=useLocation()
    const [defaultKey,setDefaultkey]=useState('')
    useEffect(()=>{
      // console.log(location);
      let path=location.pathname
      let key =path.split('/')[1]
      setDefaultkey(key)
    },[location.pathname])
  const onClick = (e) => {
    // console.log('click ', e);
    navigate('/'+ e.key)
    setDefaultkey(e.key)
  };

  return (
    <Menu
      onClick={onClick}
      className='aside'
      style={{
        width: 180,
      }}
     selectedKeys={[defaultKey]}

      mode="inline"
      theme='dark'
    >
        <Menu.Item key='listlist'><AppstoreOutlined /><span>查看文章列表list</span></Menu.Item>
        <Menu.Item key='listtable'><AppstoreOutlined /><span>查看文章列表table</span></Menu.Item>
        <Menu.Item key='edit'><MailOutlined /><span>文章编辑</span></Menu.Item>
        <Menu.Item key='means'><SettingOutlined /><span>修改资料</span></Menu.Item>

    </Menu>
  );
};

export default Aside;